<template>
  <a-layout class="auditor-layout">
    <!-- 侧边栏 -->
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      class="sidebar"
    >
      <div class="logo">
        <h2>智教易购</h2>
        <p class="logo-subtitle">审核平台</p>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        theme="dark"
        @click="handleMenuClick"
      >
        <a-menu-item key="dashboard">
          <DashboardOutlined />
          <span>审核概览</span>
        </a-menu-item>
        <a-menu-item key="content">
          <VideoCameraOutlined />
          <span>内容审核</span>
        </a-menu-item>
        <a-menu-item key="comments">
          <MessageOutlined />
          <span>评论审核</span>
        </a-menu-item>
        <a-menu-item key="merchants">
          <ShopOutlined />
          <span>商户审核</span>
        </a-menu-item>
        <a-menu-item key="logs">
          <FileTextOutlined />
          <span>审核日志</span>
        </a-menu-item>
        <a-menu-item key="statistics">
          <BarChartOutlined />
          <span>绩效统计</span>
        </a-menu-item>
        <a-menu-item key="profile">
          <UserOutlined />
          <span>个人中心</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <!-- 主内容区 -->
    <a-layout>
      <!-- 头部 -->
      <a-layout-header class="header">
        <div class="header-left">
          <MenuUnfoldOutlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <MenuFoldOutlined
            v-else
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <span class="breadcrumb">{{ currentPageTitle }}</span>
        </div>
        <div class="header-right">
          <!-- 审核统计 -->
          <div class="audit-stats">
            <a-badge :count="pendingCount" :overflow-count="99">
              <a-button type="primary" size="small">
                待审核
              </a-button>
            </a-badge>
          </div>
          
          <!-- 用户信息 -->
          <a-dropdown>
            <a class="user-dropdown">
              <a-avatar :src="userAvatar" />
              <span class="username">{{ authStore.userInfo?.name || '审核员' }}</span>
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile">
                  <UserOutlined />
                  个人资料
                </a-menu-item>
                <a-menu-item key="settings">
                  <SettingOutlined />
                  审核设置
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="logout" @click="handleLogout">
                  <LogoutOutlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 内容区 -->
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
import {
  DashboardOutlined,
  VideoCameraOutlined,
  MessageOutlined,
  ShopOutlined,
  FileTextOutlined,
  BarChartOutlined,
  UserOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  SettingOutlined,
  LogoutOutlined,
  DownOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const collapsed = ref(false)
const selectedKeys = ref<string[]>(['dashboard'])

// 待审核数量（模拟数据）
const pendingCount = ref(15)

// 用户头像
const userAvatar = computed(() => {
  return authStore.userInfo?.avatar || 'https://via.placeholder.com/32x32'
})

// 当前页面标题
const currentPageTitle = computed(() => {
  const routeMap: Record<string, string> = {
    'auditorDashboard': '审核概览',
    'auditorContent': '内容审核',
    'auditorComments': '评论审核',
    'auditorMerchants': '商户审核',
    'auditorLogs': '审核日志',
    'auditorStatistics': '绩效统计',
    'auditorProfile': '个人中心'
  }
  return routeMap[route.name as string] || '审核概览'
})

// 菜单点击处理
const handleMenuClick = ({ key }: { key: string }) => {
  selectedKeys.value = [key]
  switch (key) {
    case 'dashboard':
      router.push('/auditor')
      break
    case 'content':
      router.push('/auditor/content')
      break
    case 'comments':
      router.push('/auditor/comments')
      break
    case 'merchants':
      router.push('/auditor/merchants')
      break
    case 'logs':
      router.push('/auditor/logs')
      break
    case 'statistics':
      router.push('/auditor/statistics')
      break
    case 'profile':
      router.push('/auditor/profile')
      break
  }
}

// 退出登录
const handleLogout = () => {
  authStore.logout()
}

// 监听路由变化，更新选中的菜单项
watch(
  () => route.name,
  (newRouteName) => {
    const routeKeyMap: Record<string, string> = {
      'auditorDashboard': 'dashboard',
      'auditorContent': 'content',
      'auditorComments': 'comments',
      'auditorMerchants': 'merchants',
      'auditorLogs': 'logs',
      'auditorStatistics': 'statistics',
      'auditorProfile': 'profile'
    }
    const key = routeKeyMap[newRouteName as string]
    if (key) {
      selectedKeys.value = [key]
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.auditor-layout {
  min-height: 100vh;
}

.sidebar {
  background: #001529;
}

.logo {
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  border-bottom: 1px solid #002140;
}

.logo h2 {
  margin: 0;
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.logo-subtitle {
  margin: 0;
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 2px;
}

.header {
  background: white;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trigger {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.breadcrumb {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.audit-stats {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.user-dropdown:hover {
  background-color: #f5f5f5;
}

.username {
  color: #333;
  font-weight: 500;
}

.content {
  margin: 24px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  min-height: calc(100vh - 112px);
}

:deep(.ant-layout-sider-children) {
  display: flex;
  flex-direction: column;
}

:deep(.ant-menu-dark) {
  background: #001529;
}

:deep(.ant-menu-dark .ant-menu-item-selected) {
  background-color: #1890ff;
}

:deep(.ant-menu-dark .ant-menu-item:hover) {
  background-color: #1890ff;
}

:deep(.ant-badge-count) {
  background: #ff4d4f;
  font-weight: 600;
}
</style>
